Django后台和前台使用summernote富文本编辑器

2024-07-11 11:50| 来源: 网络整理| 查看: 265

简单介绍一下怎么在django的管理后台和用户使用网页中使用django-summernote富文本编辑器，其他富文本编辑器类似。

一、后台使用富文本编辑器

1.用pip安装django-summernote;

代码语言：javascript复制pip install django-summernote

2.在项目的setting中，将django-summernote添加到app中；

代码语言：javascript复制INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'django_summernote', 'user', ]

并在setting.py中添加：

代码语言：javascript复制MEDIA_URL='/media/' MEDIA_ROOT=os.path.join(BASE_DIR,'media')

3.在url.py中添加；

首先导入：

代码语言：javascript复制from django.views.static import serve

其次在urlpatterns中添加：

代码语言：javascript复制path('summernote/', include('django_summernote.urls')), path('media/', serve, {'document_root': settings.MEDIA_ROOT}), # 用于上传图片文件，也可以上传其他文件word,ppt等。 path('static/', serve, {'document_root': settings.STATIC_ROOT}), # 用于加载静态文件

通过上面的步骤，接下来就可以在模型models.py中使用summernote富文本编辑器了，

4.models.py中：

首先导入SummernoteTextField，

代码语言：javascript复制from django_summernote.fields import SummernoteTextField

创建文章类，并将内容字段作为富文本字段：

代码语言：javascript复制class StudyNote(models.Model): title = models.CharField('文章标题', max_length=30) author = models.CharField('作者', max_length=10, default='admin') tag = models.CharField('文章标签', max_length=10) content = SummernoteTextField(null=True) pub_time = models.DateField('发表日期', auto_now=True) # class Meta: verbose_name = '文章' # model的名字 verbose_name_plural = verbose_name def __str__(self): return self.title # 文章的title

5.在admin.py中注册创建的模型；

使用命令：python manage.py migrate, 以及python manage.py makemigrations创建相应table，

再运行python manage.py runserver

6.打开diango后台，如图所以就可以看见文章内容字段为富文本编辑器，有许多功能可以使用：

二、那么在前台，或者说用户页面中如何使用这个富文本编辑器呢？

有了前面的设置，思路大致相同：

1.在models.py中创建带有SummernoteTextField的字段的类；

代码语言：javascript复制class Addblog(models.Model): title=models.CharField('文章标题',max_length=30) author_name=models.CharField('作者',max_length=20) tag=models.CharField('文章标签',max_length=10) content=SummernoteTextField('文章内容',null=True) pub_time=models.DateField('发表日期',auto_now=True)

2.创建一个form.py；

代码语言：javascript复制from django import forms from user import models from django_summernote.fields import SummernoteTextField class BlogForm(forms.ModelForm): class Meta: model=models.Addblog fields='__all__'

3.在url.py中添加；

代码语言：javascript复制path('addblog/',views.addblog,name='addblog'),

4.在view.py中编写；

代码语言：javascript复制def addblog(request): title='添加文章' blogform=BlogForm() if requesthod=='POST': title=request.POST.get('title','') tag=request.POST.get('tag','') author=request.POST.get('author_name','') content=request.POST.get('content','') blog=StudyNote() blog.title=title blog.author=author blog.tag=tag blog.content=content blog.save() return redirect('/user/index/1/') return render(request,'user/addblog.html',locals())

5.创建html文件;

代码语言：javascript复制{ % extends "base.html" %} { % load static %} < !DOCTYPE html > { % block content %} < div class ="container" > < div class ="row" > < div class ="col-sm-8 col-md-4 col-lg-6" > 学习记录 {% if tips %} {{tips}} { % endif %} < form class ='form' action="" method="post"> { % csrf_token %} {{blogform.as_p}} < button class ="btn-lg" type="submit" > 请提交 < / button > { % endblock %}

依次运行：python manage.py migrate; python manage.py makemogrations; python manage.py runserver;

6.在浏览器中打开add文章的url，即可看见用户前台富文本的效果，和前面效果相同。

【本文地址】

公司简介

联系我们